<template>
	<div class="app-contain">
		<article class="uc-m-content mb50">
			<div class="uc-m-cou-wrap">
				<div class="clearfix mt15 uc-m-header">
					<header class="u-header-title u-info-header fl">
						<a :class="courseType == 'position'? 'current':''" href="javascript:;" @click="changCourseType('position')">岗位课程</a>
						<a :class="courseType == 'mine'? 'current':''" href="javascript:;" @click="changCourseType('mine')">自选课程</a>
						<a :class="courseType == 'live'? 'current':''" href="javascript:;" @click="changCourseType('LIVE')">直播课</a>
						<router-link to="/course" class="u-h-more" v-show="courseType == 'mine'"><span class="vam">去选课</span><em class="icon16 ml5"></em></router-link>
					</header>
					<ol class="clearfix s-tap-list fr" v-show="courseType == 'position'">
						<li class="">
							<a class="s-t-nav" href="javascript:void(0)" title="" @mouseenter="showPlan = true"><span>全部</span><em class="s-down-arrow ml10"></em></a>
							<dl class="s-nav-box" style="z-index: 999999;" :style="showPlan?'display:block':'display:none'" @mouseleave="showPlan = false">
								<dd class="current">
									<a href="javascript:;" @click="finishCourse('')">全部</a>
								</dd>
								<dd>
									<a href="javascript:;" @click="finishCourse(false)">未完成</a>
								</dd>
								<dd>
									<a href="javascript:;" @click="finishCourse(true)">已完成</a>
								</dd>
							</dl>
						</li>
						<li class="">
							<a class="s-t-nav" href="javascript:void(0)" @mouseenter="showElective = true"><span>全部</span><em class="s-down-arrow ml10"></em></a>
							<dl class="s-nav-box" style="z-index: 999999;" :style="showElective?'display:block':'display:none'" @mouseleave="showElective = false">
								<dd class="current">
									<a href="javascript:;" @click="selectCourse('')">全部</a>
								</dd>
								<dd>
									<a href="javascript:;" @click="selectCourse(1)">必修</a>
								</dd>
								<dd>
									<a href="javascript:;" @click="selectCourse(0)">选修</a>
								</dd>
							</dl>
						</li>
					</ol>
				</div>
				<div class="career-wrap" v-show="courseType == 'position'">
					<div class="fl">
						<p class="fsize14 c-999">我的岗位</p>
						<p class="fsize18 c-333 hLh30 mt10"> {{userInfo.position.name}}&nbsp; </p>
					</div>
					<div class="of">
						<ul class="fr career-attr-list">
							<li class="career-first-item">
								<p class="fsize14 c-999">总课程</p>
								<p class="fsize18 c-333 hLh30 mt10">{{positionData.total}}</p>
							</li>
							<li>
								<p class="fsize14 c-999">已完成必修</p>
								<p class="fsize18 c-333 hLh30 mt10">{{positionData.finishRequiredTotal}}/<span class="c-999">{{positionData.requiredTotal}}</span></p>
							</li>
							<li>
								<p class="fsize14 c-999">已完成选修</p>
								<p class="fsize18 c-333 hLh30 mt10">{{positionData.finishOptionTotal}}/<span class="c-999">{{positionData.optionTotal}}</span></p>
							</li>
						</ul>
					</div>
				</div>
				<div class="mt10 uc-cou-wrap u-open-cou">

					<div class="pt10">
						<div class="u-cou-box" id="aCoursesList">
							<ul class="job-cou-list uc-cou-box clearfix" v-show="courseType == 'position'">
								<li v-for="item in positionCourseList">
									<div class="cc-l-wrap">
										<div class="course-img"> <img :src="domain + item.course.image" alt="" class="img-responsive">
											<div class="course-label">
												<label title="音频" v-show="item.course.filetype == 'AUDIO'"><em class="icon16 audio-icon"></em></label>
												<label title="视频" v-show="item.course.filetype == 'VIDEO'"><em class="icon16 video-icon"></em></label>
											</div>
											<div class="course-progress">
												<span v-show="item.finish">已完成</span>
												<span v-show="!item.finish">未完成</span>
											</div>
											<div class="cc-mask">
												<router-link class="comm-btn c-btn-1" :to="{ path: '/courseInfo', query: { id: item.course.id,type:'COURSE' }}">继续学习</router-link>
											</div>
										</div>
										<div class="j-c-desc-wrap">
											<h3 class="hLh30 txtOf pt10"> <router-link class="j-course-title" :to="{ path: '/courseInfo', query: { id: item.course.id,type:'COURSE' }}"   :title="item.course.name">{{item.course.name}}</router-link> </h3>
											<div class="mt10 clearfix of hLh20 cj-cou-ds">
												<div class="fl"> <span class="c-master fsize14">时长{{item.course.minutes}}分钟</span> </div>
											</div>
										</div>
									</div>
								</li>
								<li v-show="positionCourseList.length<1" class="tac" style="width: 100%;">
									<section class="mt30 mb30 tac u-noData-wrap"> <em class="no-data-ico cTipsIco"></em> <span class="c-666 fsize14 ml10 vam">暂时没有课程~</span> </section>
								</li>

							</ul>

							<ul class="job-cou-list uc-cou-box clearfix of" v-show="courseType == 'mine'">
								<li v-for="item in mineCourseList">
									<div class="cc-l-wrap">
										<div class="course-img"> <img :src="domain + item.course.image" alt="" class="img-responsive">
											<div class="course-label">
												<label title="音频" v-show="item.course.filetype == 'AUDIO'"><em class="icon16 audio-icon"></em></label>
												<label title="视频" v-show="item.course.filetype == 'VIDEO'"><em class="icon16 video-icon"></em></label>
											</div>
											<div class="course-progress">
												<span v-show="item.finish">已完成</span>
												<span v-show="!item.finish">未完成</span>
											</div>
											<div class="cc-mask">
												<router-link class="comm-btn c-btn-1" :to="{ path: '/courseInfo', query: { id: item.course.id,type:'COURSE' }}">继续学习</router-link>
											</div>
										</div>
										<div class="j-c-desc-wrap">
											<h3 class="hLh30 txtOf pt10"> <router-link class="j-course-title" :to="{ path: '/courseInfo', query: { id: item.course.id,type:'COURSE' }}" :title="item.course.name">{{item.course.name}}</router-link> <a class="cancel-cou icon14 fr" title="移除" href="javascript:;" @click="deleteCourse(item,'COURSE')"></a></h3>
											<div class="mt10 clearfix of hLh20 cj-cou-ds">
												<div class="fl"> <span class="c-master fsize14">时长{{item.course.minutes}}分钟</span> </div>
											</div>
										</div>
									</div>
								</li>
								<li v-show="mineCourseList.length<1" class="tac" style="width: 100%;">
									<section class="mt30 mb30 tac"> <em class="no-data-ico cTipsIco">&nbsp;</em> <span class="c-666 fsize14 ml10 vam">您还没有添加课程，去<router-link class="c-master fsize14" to="/course">公开课大厅</router-link>看看</span> </section>
								</li>
							</ul>

							<ul class="job-cou-list clearfix of uc-cou-box"  v-show="courseType == 'LIVE'">
								
								<li v-for="item in mineLiveList">
									<div class="cc-l-wrap">
										<div class="course-img"> <img :src="domain + item.course.image" alt="" class="img-responsive">
											
											
											<section class="c-time-mask"> 
												<span class=""> 
													<router-link  :to="{ path: '/courseInfo', query: { id: item.course.id,type:'LIVE' }}"  class="c-fff"> 
														<img class="vam c-playing-icon" style="height: 24px;" src="../../../static/image/s-play.gif" width="24" height="24" alt="" v-if="item.course.liveStatus == '正在直播'">
														<img class="vam c-playing-icon" src="../../../static/image/hf-icon.png" width="24" height="24" alt="" v-else>
														<tt class="vam ml10">{{item.course.liveStatus}}</tt> 
													</router-link> 
												</span> 
											</section>
										</div>
										<div class="j-c-desc-wrap">
											<h3 class="hLh30 txtOf pt10"> <router-link class="j-course-title" :to="{ path: '/courseInfo', query: { id: item.course.id,type:'LIVE' }}"   :title="item.course.name">{{item.course.name}}</router-link> <a class="cancel-cou icon14 fr" title="移除" href="javascript:;" @click="deleteCourse(item,'LIVE')"></a></h3>
											<div class="mt10 clearfix of hLh20 cj-cou-ds">
												<div class="fl"> <span class="f-fM fsize14 fl tac" :class="item.course.liveStatus == '正在直播'? 'c-live-state':'c-live-finish'" title="" style="width: 45%;"> {{item.course.liveStatus}}</span> </div>
											</div>
										</div>
									</div>
								</li>
								
								
								<li v-show="mineLiveList.length<1" class="tac" style="width: 100%;">
									<section class="mt30 mb30 tac"> <em class="no-data-ico cTipsIco">&nbsp;</em> <span class="c-666 fsize14 ml10 vam">您还没有添加课程，去<router-link class="c-master fsize14" to="/live">直播课大厅</router-link>看看</span> </section>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="mt10"> </div>
			</div>
		</article>
	</div>
</template>

<script>
	import { MessageBox } from 'element-ui';
	import { getMineCourse, getCoursePositionList, deleteCourse } from '@/api/uc'
	import { domainUrl } from '@/utils/index'
	export default {
		name: 'course',
		data() {
			return {
				showElective: false,
				showPlan: false,
				courseType: 'position',
				positionCourseList: [],
				positionData: {

				},
				mineCourseList: [],
				mineLiveList: [],
				positionName: "",
				domain: "",
				positionPage: {
					userId: 0,
					courseType: 1,
					finish: false
				},
				fileurl:""//第一节直播回放ID
			}
		},
		created() {
			this.domain = domainUrl();
			this.positionPage.userId = this.userInfo.id;
			this.getMineCourse(this.userInfo.id, 'COURSE');
			this.getMineCourse(this.userInfo.id, 'LIVE');
			this.getCoursePositionList(this.positionPage);
		},
		computed: {
			userInfo() {
				return this.$store.getters.getStorageInfo;
			}
		},
		methods: {

			getMineCourse(id, type) {
				getMineCourse(id, type).then((res) => {
					if(type == 'COURSE') {
						this.mineCourseList = res.entity;
					} else {
						this.mineLiveList = res.entity;
						
						
					}

				})
			},
			getCoursePositionList(id) {
				getCoursePositionList(id).then((res) => {
					let data = res.entity;
					this.positionCourseList = data.courseList;
					this.positionName = data.positionName;
					this.positionData = {
						finishOptionTotal: data.finishOptionTotal,
						finishRequiredTotal: data.finishRequiredTotal,
						finishTotal: data.finishTotal,
						optionTotal: data.optionTotal,
						requiredTotal: data.requiredTotal,
						total: data.total
					};
				})
			},
			changCourseType(val) {
				this.courseType = val;

			},
			selectCourse(val) {
				this.positionPage.courseType = val;
				this.getCoursePositionList(this.positionPage);
			},
			finishCourse(val) {

				this.positionPage.finish = val;
				if(!val){
					delete this.positionPage["finish"];
				}
				this.getCoursePositionList(this.positionPage);
			},
			deleteCourse(val,type){
				 MessageBox.confirm('是否移除课程?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		        	deleteCourse(val.id).then((res)=>{
						if(type == 'COURSE'){
							this.getMineCourse(this.userInfo.id, 'COURSE');
						}else{
							this.getMineCourse(this.userInfo.id, 'LIVE');						
						}
						
					});  
		        }).catch(() => {
		                 
		        });
				
			}

		}
	}
</script>

<style scoped lang="scss">
	@import '../../assets/style/uCenter-nxb.scss'
</style>